<template>

  <a-form
      :model="registerForm"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      style="margin: 10vh 15vw 0 0"
  >
    <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="registerForm.username" placeholder="3~15位英文或数字"/>
    </a-form-item>
    <a-form-item
        label="email"
        name="email"
        :rules="[{ required: true, message: 'Please input your email!' }]"
    >
      <a-input v-model:value="registerForm.email" placeholder="chianblock@gmail.com"/>
    </a-form-item>
    <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!'}]"
    >
      <a-input-password v-model:value="registerForm.password" placeholder="6~15位英文或数字"/>
    </a-form-item>
    <a-form-item
        label="rePassword"
        name="rePassword"
        :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="registerForm.rePassword" placeholder="6~15位英文或数字"/>
    </a-form-item>


    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import axiosInstance from "../axios/axios.js";
import {message} from "ant-design-vue";

export default {
  data() {
    return {
      registerForm: {
        username: '',
        email: '',
        password: '',
        rePassword: '',
      },
    };
  },
  methods: {
    onFinish() {
      console.log('注册信息:', this.registerForm);

      let usernameResult= this.checkUsernameIsLegal(this.registerForm.username);
      if (!usernameResult){
        message.error("用户名不合法！")
        return;
      }

      let emailResult=this.checkEmailIsLegal(this.registerForm.email);
      if (!emailResult){
        message.error("邮箱不合法！")
        return;
      }

      let passwordResult=this.checkPasswordIsLegal(this.registerForm.password);
      if (!passwordResult){
        message.error("密码不合法！")
        return;
      }

      let isSame= this.isPasswordSame()
      if (!isSame){
        message.error("两次密码输入不一致！")
        return;
      }

      if (this.registerForm.password !== this.registerForm.rePassword) {
        this.$message.error('两次密码不一致');
        return;
      }
      message.warning("正在为您注册区块链账号中，请稍等")
      axiosInstance({
        method: "POST",
        url: "/register",  // 修改这里，加上/api前缀
        data: {
          username: this.registerForm.username,
          password: this.registerForm.password,
          email: this.registerForm.email
        },
      })
          .then(response => {
            if (response.data.code === 200) {
              message.success("注册成功");
            } else if (response.data.code === 402) {
              if (response.data.message === "用户名已存在"){
                message.error("用户名已存在");
              }else if (response.data.message === "邮箱已存在"){
                message.error("邮箱已存在");
              }
              return;
            }
            this.$router.push({
              path: '/login',
            });
          })
          .catch(error => {
            console.error("Error fetching traceability info:", error);
          });
    },

    checkUsernameIsLegal(input){
      let regex =/^[a-zA-Z0-9]{3,15}$/;
      if (regex.test(input)){
        return true;
      }else {
        return false;
      }
    },

    checkEmailIsLegal(input){
      let regex=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (regex.test(input)){
        return true;
      }else {
        return false;
      }
    },

    checkPasswordIsLegal(input){
      let regex =/^[a-zA-Z0-9]{6,15}$/;
      if (regex.test(input)){
        return true;
      }else {
        return false;
      }
    },

    isPasswordSame() {
      if (this.registerForm.password === this.registerForm.rePassword) {
        return true;
      } else {
        return false;
      }
    }
  },
};
</script>
<style>

</style>
